<template>
    <div id="ArticleRight">
            <div class='user'>
                <div class='portrait'><img  :src="`http://localhost:3000/upload/${author.headImg}`" alt=""></div>
                <div class='username'>
                    <router-link tag="span"  :to="{path:'/UserOthDynamic',query:{uid:author.uId}}"><div class="name"><p>{{author.nickName}}</p></div></router-link>
                    <div class='leave'>{{author.occupation}}</div>
                </div>
                <div style="clear: both;"></div>
                <div class="signature">{{author.Signature}}</div>
                <div class='fans'>
                    <div><span>{{fans.fans}}</span> 人关注</div>
                    <div><span>{{all}}</span> 篇文章</div>    
                </div>
                <div class="follow ">
                    <el-button type="primary" class="follows" @click="follows" v-if="followsflag==1" >+关注他</el-button>
                    <el-button type="primary" class="follows2" @click="follows2" v-else-if="followsflag==2">取消关注</el-button>
                    <el-button type="primary" class="follows3" v-else-if="followsflag==3">我自己</el-button>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
             uid: '',
             author:'',
             ownuids:'',
             followsflag:1,
             fans:'',
             all:'',
            }
    },
    created(){
      this.ownuids=this.$store.state.ownUid
      this.$eventBus.$on('Article_uid',(res)=>{
            this.uid = res       //接受参数
            console.log('uid',this.uid)
            
            this.$axios.get('/api/article/all',{params:{uId:this.uid}})
                .then(res=>{
                    console.log('res',res)
                    this.all=res.data.data[0].a
                    // console.log('fans',this.fans.fans)
                    console.log('all',this.all)
                })
                .catch(err=>{
                    console.log('err:',err)
                })

            this.$axios.get('/api/article/author',{params:{uid:this.uid}})
                .then(res=>{
                    // console.log('res:',this.ownuids)
                    this.author=res.data.data[0]
                    if(this.ownuids==this.author.uId){
                        this.followsflag=3
                    }
                    else{
                        //判断是否关注
                        this.$axios.get('/api/users/follow1',{params:{ouid:this.uid,ownuid:this.ownuids}})
                            .then(res=>{
                            console.log(res)
                                if(res.data.data.length){
                                    this.followsflag=2
                                }
                                else{
                                this.followsflag=1
                                }
                            })
                            .catch(err=>{
                                console.log('err:',err)
                            })
                    }
                    // console.log('author',this.author)
                })
                .catch(err=>{
                    console.log('err:',err)
                })
            
            

            })
            
    //   console.log(this.aid)
      this.$axios.get('/api/users/fans',{params:{uId:this.ownuids}})
                .then(res=>{
                    this.fans=res.data.data[0]
                    // console.log('fans',this.fans.fans)
                    // console.log(this.fans.fans)
                })
                .catch(err=>{
                    console.log('err:',err)
                })
      
    },
    methods:{
        follows(){
            this.followsflag=2
            this.$axios.get('/api/users/follow3',{params:{ouid:this.uid,ownuid:this.ownuids}})
                            .then(res=>{
                                this.$message({
                                    message: '关注成功',
                                    type: 'success'
                                });
                            })
                            .catch(err=>{
                                console.log('err:',err)
                            })
        },
        follows2(){
            this.followsflag=1
            this.$axios.get('/api/users/follow2',{params:{ouid:this.uid,ownuid:this.ownuids}})
                            .then(res=>{
                            this.$message({
                                message: '取消关注',
                                type: 'success'
                            });
                            })
                            .catch(err=>{
                                console.log('err:',err)
                            })
        }
    }
}
</script>